<template>
  <div>
      <!-- 
        1. 遍历数组 重点 背下来
        要遍历哪个标签，就写在哪个标签上

        v-for="item in 数组变量名"    item就是数组的元素
        v-for="(item, index) in 数组名"   index => 元素的下标

        key是遍历的时候，给遍历的元素打上的一个唯一的标记
        注意：item in items  里面的in 可以换成of
        ==> 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
        ==> key的值是字符串或者数值

        2. 遍历对象 了解 
        3. 遍历数字 了解

       -->
       <ul>
           <li v-for="item of arrList" :key="item">{{ item }}</li>
       </ul>
       <hr>
       <ul>
           <li v-for="(item, index) in arrList" :key="item">{{ index }} - {{ item }} </li>
       </ul>
       <hr>
       <ul>
           <!-- 建议，把 () 加上 -->
           <li v-for="el, i in arrList" :key="el">{{ i }} - {{ el }} </li>
       </ul>
       <!-- 
           2.遍历对象 （了解）
            <li v-for="value in object">
                {{ value }}
            </li>
            // value 值
            // key  键
           v-for="(value, key) in 对象"
        -->
        <ul>
            <li v-for="(value, key) in obj" :key="value">{{ value }} - {{ key }}</li>
        </ul>
        <!-- 3. 遍历数值 number类型, 从1-到10 -->
        <hr>
        <ul>
            <li v-for="el in 10" :key="el">{{ el }}</li>
        </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arrList:['orange', 'pink', 'skyblue', 'purple'],
            obj:{
                name:'小淞',
                age:6,
                desc:'这就是爱'
            }
        }
    }
}
</script>

<style>

</style>